<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<head>
<title>Welcome to the IMDroid</title>
</head>
<body>
	<div>
		请输入：<input type="text" id="suggestId" size="120" value=""
			style="width: 550px;" />
	</div>
	<div id="searchResultPanel"
		style="border: 1px solid #C0C0C0; width: 550px; height: auto; display: none;"></div>
	<div style="width: 800px; height: 400px; border: 1px solid gray"
		id="container"></div>

	<f:view>
		<h:form id="myForm">
			<table border="0" cellpadding="0" cellspacing="0" width="100%"
				align="left">
				<tr>
					<td>目的地名称：</td>
					<td><h:inputText value="#{destination.destination}"
							id="destination" />
					</td>
				</tr>
				<tr>
					<td>目的地lat：</td>
					<td><h:inputText value="#{destination.lat}" id="lat" />
					</td>
				</tr>
				<tr>
					<td>目的地lon：</td>
					<td><h:inputText value="#{destination.lon}" id="lon" />
					</td>
				</tr>
				<tr>
					<td><h:commandButton value="Sumbit" type="submit" id="btnSend"
							action="#{destination.send}" />
					</td>
				</tr>
				<tr>
					<td colspan="2"><h:messages />
					</td>
				</tr>
			</table>
		</h:form>
	</f:view>
</body>


<script type="text/javascript">
	function G(id) {
		return document.getElementById(id);
	}

	var map = new BMap.Map("container");
	var point = new BMap.Point(116.3964, 39.9093);
	map.centerAndZoom(point, 13);
	map.addControl(new BMap.NavigationControl());
	map.enableScrollWheelZoom();

	var ac = new BMap.Autocomplete( //建立一个自动完成的对象
	{
		"input" : "suggestId",
		"location" : map
	});

	ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
		var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province + _value.city + _value.district
					+ _value.street + _value.business;
		}
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = "
				+ value;

		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province + _value.city + _value.district
					+ _value.street + _value.business;
		}
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = "
				+ value;
		G("searchResultPanel").innerHTML = str;
	});

	map.addEventListener('click', function(e) {

		var info = new BMap.InfoWindow('', {
			width : 260
		});

		var projection = this.getMapType().getProjection();

		var lngLat = e.point;

		var lngLatStr = "经纬度：" + lngLat.lng + ", " + lngLat.lat;

		info.setContent(lngLatStr);

		//map.openInfoWindow(info, lngLat);

		document.getElementById("myForm:destination").value = '地图上的点';
		document.getElementById("myForm:lat").value = lngLat.lat;
		document.getElementById("myForm:lon").value = lngLat.lng;

	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
		var _value = e.item.value;
		myValue = _value.province + _value.city + _value.district
				+ _value.street + _value.business;
		G("searchResultPanel").innerHTML = "onconfirm<br />index = "
				+ e.item.index + "<br />myValue = " + myValue;
		document.getElementById("myForm:destination").value = myValue;
		document.getElementById("myForm:lat").value = '';
		document.getElementById("myForm:lon").value = '';
		setPlace();
	});

	function setPlace() {
		map.clearOverlays(); //清除地图上所有覆盖物
		function myFun() {
			var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMap.Marker(pp)); //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
			onSearchComplete : myFun
		});
		local.search(myValue);
	}
</script>